<template>
    <el-dialog custom-class="form-dialog" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px" v-loading="loading"
        :before-close="handleClose">
        <!-- 表单内容 -->
        <div class="form-dialog-content-box">
            <el-form :model="form" label-width="80px" :rules="rules" ref="ruleForm" :size="size">
                <el-form-item label="标题：" prop="title">
                    <el-input v-model="form.title" :size="size" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="名称：" prop="name">
                    <el-input v-model="form.name" :size="size" placeholder="页面name"></el-input>
                </el-form-item>
                <el-form-item label="图标：" prop="icon">
                    <el-input v-model="form.icon" :size="size"></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                    <el-input v-model.number="form.sort" :size="size" type="number" placeholder="数字越大越靠前"></el-input>
                </el-form-item>
                <el-form-item label="父级：" prop="pid">
                    <el-cascader :size="size" v-model="form.pid"
                        :options="menuList" clearable
                        :props="{ checkStrictly: true,value: 'id', label:'title' }">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="路径：" prop="path" style="width: 100%;">
                    <el-input v-model="form.path" :size="size" placeholder="页面路径"></el-input>
                </el-form-item>
                <el-form-item label="菜单：" prop="isMenu">
                    <el-switch v-model.number="form.isMenu" :active-value="1" :inactive-value="0" @change="isMenuChange"></el-switch>
                </el-form-item>
                <el-form-item label="全屏：" prop="isFull">
                    <el-switch v-model.number="form.isFull" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="备注：" prop="remarks" style="width: 100%;">
                    <el-input v-model="form.remarks" :size="size" type="textarea" :rows="3"></el-input>
                </el-form-item>
                <el-form-item label="CRUD：" prop="curd">
                    <el-switch v-model.number="form.curd" :active-value="1" :inactive-value="0" :disabled="!form.isMenu"></el-switch>
                    <el-tooltip class="item" effect="dark" content="自动添加CRUD子菜单" placement="right">
                        <i class="el-icon-info"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
        </div>
        <!-- 提交区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelBtn" :size="size">取 消</el-button>
            <el-button type="primary" @click="handleSubmitBtn" :size="size">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
//引入混入逻辑
import mixin from '@/mixins/form'
export default {
    name: "formDialog",
    mixins: [mixin],
    props: {
        title: {
            type: String,
            default: "新增"
        }
    },
    data() {
        return {
            form: {
                id: "",
                title: "",
                name: "",//用于路由缓存
                path: "",
                pid: "",
                icon: "",
                sort: 0,
                isMenu: 1,//是否展示菜单
                isFull: 0,//全屏页面
                remarks: "",

                curd: 0,//是否自动添加子菜单（CRUD专用）
            },//表单数据

            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                path: [
                    { required: true, message: '请输入路径', trigger: 'blur' },
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'blur' },
                ],
            },//表单验证规则
        }
    },
    methods: {
        //是否菜单切换
        isMenuChange(){
            //如果不是菜单，则禁止开启CURD
            if(this.form.isMenu != 1){
                this.form.curd = 0
            }
        },
        //重写 处理确认按钮的事件
        handleSubmitBtn() {
            //执行校验
            this.$refs.ruleForm.validate((valid) => {
                //判断校验结果
                if (valid) {
                    //校验成功
                    //深拷贝
                    var form = this.$utils.deepCopy(this.form)
                    //取数组最后一个元素
                    if(Array.isArray(form.pid)){
                        form.pid = form.pid.pop()
                    }
                    //事件抛出
                    this.$emit('submit', form)
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    },
    computed: {
        ...mapState(['menuOrigin']),
        //菜单，数组格式
        menuList(){
            //深拷贝一份
            const menuOrigin = this.$utils.deepCopy(this.menuOrigin)
            //转换成树形对象
            const menuTree = this.$utils.buildTree(menuOrigin)
            //将树形对象最外层转换成数组
            const menuTreeArr = []
            for(var key in menuTree){
                menuTreeArr.push(menuTree[key])
            }
            //排序
            menuTreeArr.sort((p1,p2)=>{
                return p2.sort - p1.sort
            })
            return menuTreeArr
        }
    }
}
</script>

<style scoped lang="scss">
.form-dialog-content-box {
    ::v-deep .el-form{
        display: flex;
        flex-wrap: wrap;
        .el-form-item{
            width: 50%;
            .el-cascader{
                display: block;
            }
            .el-icon-info{
                margin-left: 4px;cursor: pointer;
                font-size: 16px;
                display: inline-block;
                transform: translateY(2px);
            }
        }
    }
}
</style>